<script>
import commonTable from "@/common/components/commonTable/commonTable.vue" // 子组件
import { get, getDynamicynamic, getFileUseBlobByPost, post } from "@/utils/http"
import { tables } from "./table"
// 表头展示项及表头配置
export default {
  components: { CommonTable: commonTable },
  data() {
    return {
      tableData: [
        {
          ecifCustNo: "00006279179260",
          limitNo: "ZHED000062791792600002",
          custName: "北京蓝图******有限公司"
        }
      ],
      total: 1,
      size: 10,
      page: 1,
      tableColumns: [], // 表头展示项及表头配置
      operates: {
        // 操作栏
        label: "工具栏", // 默认为操作
        fixed: "right", // 是否固定 * [string, boolean] => true, false, left, right
        align: "center", //	对齐方式 * left, center, right
        list: [
          {
            label: "删除",
            show: true, // 是否显示该按钮 * true, false
            disabled: true,
            type: "danger", // 按钮类型 * 默认 text
            methods: (row, index) => {
              // 按钮绑定的function
              this.tableRemove(row, index)
            }
          },
          {
            label: "修改",
            show: true,
            disabled: false,
            type: "warning",
            methods: (row, index) => {
              this.tableEdit(row, index)
            }
          }
        ]
      },
      buttonGruop: [
        {
          type: "primary",
          key: "clearCheck",
          value: "清空复选框"
        },
        {
          type: "success",
          key: "rest",
          value: "重置"
        }
      ]
    }
  },
  created() {
    this.getTable()
  },
  mounted() {
    this.tableColumns = tables
  },
  methods: {
    async getTable() {
      const res = await get("/api/table")
      console.log("resres", res)
      this.tableData = res.list
    },
    handleSizeChange(val) {
      console.log(val)
      this.size = val
    },
    handleCurrentChange(val) {
      console.log(val)
      this.page = val
    },
    tableRemove(val, i) {
      console.log(val, i)
    },
    tableEdit(val, i) {
      console.log(val, i)
    },
    tableColumnChangeSelect(list) {
      console.log(list)
    },
    actionFun(item) {
      const value = item.key
      switch (value) {
        case "clearCheck":
          this.$refs.commonTable.clearSelection()
          break
        case "rest":
          // this.$refs.table.clearSelection()
          break
        default:
          break
      }
    }
  }
}
</script>

<template>
  <div>
    <div class="toolbar">
      <el-button-group>
        <el-button
          :type="item.type"
          @click="actionFun(item)"
          v-for="(item, index) in buttonGruop"
          :key="index"
        >
          {{ item.value }}
        </el-button>
      </el-button-group>
    </div>
    <CommonTable
      :total="total"
      :handle-current-change="handleCurrentChange"
      :handle-size-change="handleSizeChange"
      :table-data="tableData"
      :table-columns="tableColumns"
      :selection-show="true"
      :redio-show="false"
      :operates="operates"
      @table-column-change-select="tableColumnChangeSelect"
      :get-row-key="(row) => row.id"
      ref="commonTable"
    >
      <template #ecifCustNo="scope">
        <div>{{ scope.row.ecifCustNo }}</div>
      </template>
    </CommonTable>
  </div>
</template>

<style lang="scss" scoped>
.toolbar {
  text-align: right;
  height: 50px;
}
</style>
